<route lang="json5" type="page">
  {
    style: {
      navigationBarTitleText: '选择课次',
    },
    anonymous: false
  }
</route>

<script lang="ts" setup>
import LessonCell from '@/components/LessonCell.vue'
import { ClassApi } from '@/apis'

const loading = ref(false)
const lessonList = ref<ClassApi.SelectiveClassLesson[]>([])
const getLessonList = async (classId) => {
  loading.value = true
  try {
    const classLessonList = await ClassApi.getClassLessonList(classId)
    lessonList.value = classLessonList.map(item => ({
      select: false,
      ...item,
    }))
  } finally {
    loading.value = false
  }
}

const onLessonSelect = (item) => {
  if (item.lessonStatus === 1) {
    item.select = !item.select
  }
}

const onConfirm = () => {
  const selectedList = lessonList.value.filter(item => item.select)
  if (selectedList.length) {
    uni.setStorageSync('selectLessons', JSON.stringify(selectedList))
    uni.navigateBack()
    return
  }
  uni.showToast({
    title: '请选择课次',
    icon: 'none',
  })
}

onLoad((options) => {
  if (options.id) {
    getLessonList(options.id)
  }
})
</script>

<template>
  <view v-if="loading" class="flex-row-center-center bg-white page">
    <wd-loading color="#33AD7C" />
  </view>
  <template v-else>
    <view class="content px py">
      <view v-for="(item, index) in lessonList" :key="item" class="mt-[24rpx]" :style="index === 0 ? 'margin-top:0' : ''">
        <view @click="onLessonSelect(item)">
          <LessonCell :active="item.select" :data="item" />
        </view>
      </view>
      <view v-if="!lessonList.length">
        <wd-status-tip image="content" tip="暂无数据" />
      </view>
    </view>

    <view class="footer">
      <view class="px-[30rpx] py-[12rpx]">
        <wd-button block type="success" :round="false" @click="onConfirm">
          确定
        </wd-button>
      </view>
    </view>
  </template>
</template>

<style lang="scss" scoped>
  .content {
    height: calc(100vh - 160rpx) !important;
    overflow: scroll;
  }

  .footer {
    position: fixed;
    left: 0px;
    bottom: 0px;

    height: 160rpx;
    width: 100%;
    background: white;
    box-shadow: 0px -4px 4px 0px #0000000D;

  }
</style>
